<template>
  <div>
    <div class="mixin-components-container">
      <el-row>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>打印结算单</span>
          </div>
          <div class="filter-container">
            <!-- 输入车辆状态为已经停止检票的报班卡号 -->
            <!-- 报班卡号 -->
            <span>报班卡号：</span>
            <el-input
              v-model="bbkh"
              placeholder="请输入报班卡号"
              style="width: 200px"
              class="cardNumber"
              id="cpbh-input"
              clearable
              @keydown.enter.native="printSettlement(bbkh)"
            />
            <!-- 报班卡号  end -->
            <!-- 下表出现车辆检票的相应信息，并且在上方输入窗口中会显示时间，牌照，座位数和车主姓名的信息 -->
            <!-- 按钮 -->
            <el-button type="primary" @click="printSettlement(bbkh)">
              打印结算单
            </el-button>
            <el-button type="primary" @click="goJianpiao()">
              补检退检
            </el-button>
            <el-button type="primary" @click="goChaxun()"> 信息查询 </el-button>
          </div>
          <div class="filter-container">
            <!-- 时间 -->
            <span>时间：</span>
            <el-input
              v-model="data"
              style="width: 100px"
              class="cardNumber"
              :disabled="true"
            />
            <!-- 时间  end -->
            <!-- 牌照 -->
            <span>牌照：</span>
            <el-input
              v-model="cpzh"
              style="width: 120px"
              class="cardNumber"
              :disabled="true"
            />
            <!-- 牌照  end -->
            <!-- 座位 -->
            <span>座位：</span>
            <el-input
              v-model="seat"
              style="width: 100px"
              class="cardNumber"
              :disabled="true"
            />
            <!-- 座位  end -->
            <!-- 车主姓名 -->
            <span>车主姓名：</span>
            <el-input
              v-model="name"
              style="width: 100px"
              class="cardNumber"
              :disabled="true"
            />
            <!-- 车主姓名  end -->
          </div>
          <div class="filter-container my-table">
            <h3 v-if="isShow">当前检票数量为:{{ num }}张</h3>
            <el-table :data="tableData" height="250">
              <el-table-column fixed prop="cpbh" label="车票编号" width="150">
              </el-table-column>
              <el-table-column prop="bbkh" label="报班卡号" width="120">
              </el-table-column>
              <el-table-column prop="mdz" label="目的站" width="120">
              </el-table-column>
              <el-table-column prop="cplx" label="车票类型" width="120">
              </el-table-column>
              <el-table-column prop="jpk" label="检票口" width="120">
              </el-table-column>
              <el-table-column prop="pj" label="票价" width="120">
              </el-table-column>
              <el-table-column prop="cpzt" label="车票状态" width="120">
              </el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-row>
    </div>
  </div>
</template>


<script>
export default {
  name: "Tuijian",
  data() {
    return {
      bbkh: "",
      data: "",
      cpzh: "",
      seat: "",
      name: "",
      message: "",
      num: "",
      isShow: false,
      tableData: [],
      arr: [
        {
          cpbh: "000000",
          bbkh: "111111",
          mdz: "曲周",
          cplx: "全票",
          jpk: "0",
          pj: 8.5,
          cpzt: "正常",
        },
        {
          cpbh: "000001",
          bbkh: "111111",
          mdz: "曲周",
          cplx: "全票",
          jpk: "0",
          pj: 8.5,
          cpzt: "正常",
        },
      ],
    };
  },
  methods: {
    printSettlement() {
      if (this.bbkh == this.arr[0].bbkh) {
        this.data = "15:30";
        this.cpzh = "冀A000000";
        this.seat = 68;
        this.name = "张三";
        this.tableData = this.arr;
        for (let i = 0; i < this.tableData.length; i++) {
          this.num = i;
        }
        this.isShow = true;
        this.num += 1;
        console.log(this.num);
      }
    },
    goJianpiao() {
      this.$router.push({ path: "/jianpiao" });
      // this.$router.push({path:'../jianpiao/jianpiao.vue',params:{setid:111222}});
    },
    goChaxun() {
      this.$router.push({ path: "../jianpiao/jianpiao.vue" });
    },
  },
};
</script>

<style scoped>
.cardNumber {
  margin-right: 50px;
}
button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  margin-right: 40px;
}
span {
  font-size: 14px;
  color: #606266;
}
.mixin-components-container {
  background-color: #f0f2f5;
  padding: 30px;
  min-height: calc(100vh - 84px);
}
.filter-container {
  margin-bottom: 20px;
}
</style>

